/* 利用数组加轮播图样式 */
var swiper = [
    {x:-100,y:0.8,z:1},
    {x:150,y:1,z:2},
    {x:400,y:0.8,z:1},
    {x:1200,y:0.8,z:1},
    {x:1200,y:0.8,z:1},
    {x:1200,y:0.8,z:1}
]
var banner_pic = document.querySelectorAll('.banner .contain .pic .banner_pic')
//封装样式，后面轮播图切换的时候需要重新遍历赋值
function changeSwiper(){
    banner_pic.forEach(function(item,i){
        item.style.transform="translateX("+ swiper[i].x +"px) scale("+ swiper[i].y +")"
        item.style.zIndex = swiper[i].z
        // console.log(item.style.transform);
        // console.log(item.style.zIndex);
        // console.log(swiper[i].x,swiper[i].y,swiper[i].z);
    })
}
changeSwiper() //首次调用


/* 轮播图切换效果 */
//思路：将数组中的最后一个值弹出,压在前面/将数组中的第一个值弹出,压在后面，
// 上一页
var swiper_left = document.querySelector('.banner .contain .swiper_left')
swiper_left.onclick = function(){
    var temp = swiper.pop()
    swiper.unshift(temp)
    changeSwiper()  //二次调用
    
}
// 下一页
var swiper_right = document.querySelector('.banner .contain .swiper_right')
swiper_right.onclick = function(){
    var temp = swiper.shift()
    swiper.push(temp)
    changeSwiper()  //二次调用
    
}


// 点击图片切换上一页和下一页
// 思路：获取所有的图片div，遍历并判断当前的transform值，前压后谈，后压前弹
var banner_pic = document.querySelectorAll('.banner .contain .pic .banner_pic')
banner_pic.forEach(function(item,i){
    item.onclick = function(){
        var tras = item.style.transform
        // console.log(tras);
        if(tras.indexOf('400') !=-1){
            var temp = swiper.pop()
            swiper.unshift(temp)
            changeSwiper()  //二次调用   
        }

        if(tras.indexOf('100') !=-1){
            var temp = swiper.shift()
            swiper.push(temp)
            changeSwiper()  //二次调用
        }
    }
})